<template>
  <div>
    <div class="wrap">
      <div class="title">
        <span>基本设置</span>
      </div>

      <div class="upload">
        <div class="upload-l">
          <img src="../assets/img/sooc.png" alt="" id="fileImg">
          <div class="upload-input">
            上传封面缩略图
            <input type="file" @change="previewFile" id="file">
          </div>
          <div class="size">
            尺寸：200*200px
          </div>
        </div>
        <div class="upload-r">
          <div class="set-title clear">
            <span>标题</span>
            <input type="text" value="输入">
          </div>
          <div class="set-title clear">
            <span>描述</span>
            <textarea></textarea>
          </div>
          <div class="set-music clear">
            <span>全局<br>背景音</span>
            <input type="text">
            <div class="up-music">
              上传音乐
              <input type="file" @change="previewFile" id="upMusic">
            </div>
          </div>
          <div class="music">
            <audio src="../static/song.ogg" controls="controls" id="fileMusic">
            </audio>
          </div>
        </div>
      </div>

      <div class="title senior">
        <span>高级设置</span>
      </div>
      <div class="senior-none clear">
        <span class="seniop-title">隐藏</span>
        <ul class="seniop-list">
          <li>
            <input type="checkbox" name="week" value="1">
            <span>全局标题</span>
          </li>
          <li>
            <input type="checkbox" name="week" value="1">
            <span>全局序号</span>
          </li>
          <li>
            <input type="checkbox" name="week" value="1">
            <span>相关推荐</span>
          </li>
          <li>
            <input type="checkbox" name="week" value="1">
            <span>评论</span>
          </li>
          <li>
            <input type="checkbox" name="week" value="1">
            <span>预览时底部工具条</span>
          </li>
        </ul>
      </div>

      <div class="senior-none clear">
        <span class="seniop-title">其他</span>
        <ul class="seniop-list">
          <li>
            <input type="checkbox" name="week" value="1">
            <span>允许快进</span>
          </li>
        </ul>
      </div>

      <div class="cancel">
        <a href="#">确定</a>
        <a href="#">取消</a>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {},
  methods: {
    //上传文件
    previewFile(even) {
      let buttonId = even.currentTarget.id;
      let container = 'fileImg';

      if (buttonId === 'upMusic') {
        container = 'fileMusic'
      }
      var preview = document.getElementById(container)
      var file = document.getElementById(buttonId).files[0]
      var reader = new FileReader()
      reader.onloadend = function() {
        preview.src = reader.result
      }
      if (file) {
        reader.readAsDataURL(file)
      } else {
        preview.src = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/css/apple.scss';
</style>